const titleConfig = {
  'ql-bold': '加粗',
  'ql-color': '颜色',
  'ql-font': '字体',
  'ql-code': '插入代码',
  'ql-italic': '斜体',
  'ql-link': '添加链接',
  'ql-background': '背景颜色',
  'ql-size': '字体大小',
  'ql-strike': '删除线',
  'ql-script': '上标/下标',
  'ql-underline': '下划线',
  'ql-blockquote': '引用',
  'ql-header': '标题',
  'ql-indent': '缩进',
  'ql-list': '列表',
  'ql-align': '文本对齐',
  'ql-direction': '文本方向',
  'ql-code-block': '代码块',
  'ql-formula': '公式',
  'ql-image': '图片',
  'ql-clean': '清除字体样式',
  'ql-upload': '文件'
};

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image"] // 链接、图片、视频-----['link', 'image', 'video']
];


export default {
  props: {

  },
  data() {
    return {
      uniqueId: "uniqueId",
      content: "<h2>I am Example</h2>", // 富文本编辑器默认内容
      loading: false,
      imgurl: "",
      editorOption: {
        theme: "snow",
        placeholder: "请输入正文",
        modules: {
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  // 调用iview图片上传
                  document.querySelector('.bottom .el-upload.el-upload--picture-card ').click()
                  console.log('我点了')
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      },
    }
  },
  computed: {},
  mounted () { this.addQuillTitle() },
  created () {},
  methods: {
    handleAvatarChangeIcon (file, fileList) {
      let quill = this.$refs.myQuillEditor.quill
      const isJPG = file.raw.type === 'image/jpeg'
      const isPNG = file.raw.type === 'image/png'
      // const isLt2M = file.raw.size / 1024 / 1024 < 0.5
      this.hideUploadIcon = fileList.length >= 1;

      if (!isPNG && !isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return false
      } else if (isPNG || isJPG) {
        let formdata = new FormData()
        formdata.append('file', file.raw)
        let config = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };
        this.axios
          .post(
            "/sys/v1/common/upload/files?pathName=internalSystem",
            formdata,
            config
          )
          .then((res) => {
            if (res.code == 0) {
              this.imgurl = `${this.ImgHttps}${res.data.url}`
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片，res为服务器返回的图片链接地址
              quill.insertEmbed(length, 'image', this.imgurl)
              // 调整光标到最后
              quill.setSelection(length + 1)
            } else {
              console.log(err)
            }
          });
      }
    },
    // 鼠标hover提示
    addQuillTitle () {
      const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect = oToolBar.querySelectorAll('select');
      aButton.forEach(function (item) {
        if (item.className === 'ql-script') {
          item.value === 'sub' ? item.title = '下标' : item.title = '上标';
        } else if (item.className === 'ql-indent') {
          item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';
        } else {
          item.title = titleConfig[item.classList[0]];
        }
      });
      aSelect.forEach(function (item) {
        item.parentNode.title = titleConfig[item.classList[0]];
      });
    },
  }
}

